<template>
  <div class="overview_index" v-if="menu === 'platform'">
    <!-- <BorderBox title="基本信息">
      <template #title_r>
        <ga-button type="primary" @click="$refs.editModalRef.open(info)">
          编辑
        </ga-button>
      </template>
      <template #main_info>
        <ga-descriptions
          size="large"
          :column="2"
          :align="{ label: 'right' }"
          :label-style="{ width: '70px' }"
          :value-style="{ minWidth: '180px' }"
        >
          <ga-descriptions-item label="集群名称">
            {{ info?.name || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="业务模型">
            {{
              Array.isArray(info?.modelList)
                ? info?.modelList.join("/")
                : info?.modelList || "-"
            }}
          </ga-descriptions-item>
          <ga-descriptions-item label="集群状态">
            <TagStatus :type="info?.status" />
          </ga-descriptions-item>
          <ga-descriptions-item label="资源类型">
            <platform :type="info?.resourceType" />
          </ga-descriptions-item>
          <ga-descriptions-item label="关联项目">
            {{ info?.projectList?.length > 0 ? info?.projectList.join(",") : "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="超分系数">
            <ga-tooltip content="CPU超分">
              <SvgIcon name="bronze_medal" />{{ info?.ratioCpu }}
            </ga-tooltip>
            <ga-tooltip content="内存超分">
              <span style="margin: 0 16px">
                <SvgIcon name="bronze_medal" />
                {{ info?.ratioMem }}
              </span>
            </ga-tooltip>
            <ga-tooltip content="存储超分">
              <SvgIcon name="bronze_medal" />{{ info?.ratioDisk }}
            </ga-tooltip>
          </ga-descriptions-item>
          <ga-descriptions-item label="标签">
            <Tags
              v-model="tagInfo"
              show-num="3"
              position="tr"
              edit-show
              @edit-tag="$refs.tagModalRef.open(info)"
            />
          </ga-descriptions-item>
        </ga-descriptions>
      </template>
    </BorderBox> -->
    <BorderBox
      title="资源配置"
      :wrapperStyle="{ margin: '16px 0' }"
      :styleText="{ display: 'flex', 'justify-content': 'space-between' }"
    >
      <template #main_info>
        <assignRate
          title="CPU分配"
          :total="info?.totalCpuCores || 0"
          :chartsData="[
            { value: '系统预留', label: assignInfo?.preCpu || 0 },
            { value: '已使用', label: assignInfo?.usedCpu || 0 },
            { value: '剩余', label: assignInfo?.restCpu || 0 },
          ]"
        />
        <assignRate
          title="内存分配"
          :total="assignInfo?.totalMemory || 0"
          :chartsData="[
            { value: '系统预留', label: assignInfo?.preMem || 0 },
            { value: '已使用', label: assignInfo?.usedMem || 0 },
            { value: '剩余', label: assignInfo?.restMem || 0 },
          ]"
        />
        <assignRate
          title="存储"
          :total="info?.totalDisk || 0"
          :chartsData="[
            { value: '系统预留', label: info?.usedDisk || 0 },
            { value: '已使用', label: info?.usedDisk || 0 },
            { value: '剩余', label: info?.totalDisk - info?.usedDisk || 0 },
          ]"
        />
      </template>
    </BorderBox>
    <BorderBox title="主机组" :styleText="{ padding: 0 }">
      <template #main_info><vmGroup height="100%" /></template>
    </BorderBox>
  </div>
  <div class="overview_index" v-if="menu === 'cluster'">
    <BorderBox title="基本信息">
      <template #title_r>
        <ga-button type="primary" @click="$refs.editModalRef.open(info)">
          编辑
        </ga-button>
      </template>
      <template #main_info>
        <ga-descriptions
          size="large"
          :column="2"
          :align="{ label: 'right' }"
          :label-style="{ width: '70px' }"
          :value-style="{ minWidth: '180px' }"
        >
          <ga-descriptions-item label="集群名称">
            {{ info?.name || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="业务模型">
            {{
              Array.isArray(info?.modelList)
                ? info?.modelList.join("/")
                : info?.modelList || "-"
            }}
          </ga-descriptions-item>
          <ga-descriptions-item label="集群状态">
            <TagStatus :type="info?.status" />
          </ga-descriptions-item>
          <ga-descriptions-item label="资源类型">
            <platform :type="info?.resourceType" />
          </ga-descriptions-item>
          <ga-descriptions-item label="关联项目">
            {{ handleProject(info?.projectList) || "-" }}
          </ga-descriptions-item>
          <ga-descriptions-item label="超分系数">
            <ga-tooltip content="CPU超分">
              <SvgIcon name="bronze_medal" />{{ info?.ratioCpu }}
            </ga-tooltip>
            <ga-tooltip content="内存超分">
              <span style="margin: 0 16px">
                <SvgIcon name="bronze_medal" />
                {{ info?.ratioMem }}
              </span>
            </ga-tooltip>
            <ga-tooltip content="存储超分">
              <SvgIcon name="bronze_medal" />{{ info?.ratioDisk }}
            </ga-tooltip>
          </ga-descriptions-item>
          <ga-descriptions-item label="标签">
            <Tags
              v-model="tagInfo"
              show-num="3"
              position="tr"
              edit-show
              @edit-tag="$refs.tagModalRef.open(info)"
            />
          </ga-descriptions-item>
        </ga-descriptions>
      </template>
    </BorderBox>
    <div class="flex_between_aligncenter mb_16">
      <assignRate
        title="CPU分配"
        :total="info?.totalCpuCores || 0"
        :chartsData="[
          { value: '已使用', label: assignInfo?.usedCpu || 0 },
          { value: '剩余', label: assignInfo?.restCpu || 0 },
          { value: '系统预留', label: assignInfo?.preCpu || 0 },
        ]"
      />
      <assignRate
        title="内存分配"
        :total="assignInfo?.totalMemory || 0"
        :chartsData="[
          { value: '已使用', label: assignInfo?.usedMem || 0 },
          { value: '剩余', label: assignInfo?.restMem || 0 },
          { value: '系统预留', label: assignInfo?.preMem || 0 },
        ]"
      />
      <assignRate
        title="存储"
        :total="assignInfo?.usedCapacity + assignInfo?.restCapacity || 0"
        :chartsData="[
          { value: '已使用', label: assignInfo?.usedCapacity || 0 },
          { value: '剩余', label: assignInfo?.restCapacity || 0 },
        ]"
      />
    </div>
    <!-- <BorderBox
      title="资源配置"
      :wrapperStyle="{ margin: '16px 0' }"
      :styleText="{ display: 'flex', 'justify-content': 'space-between' }"
    >
      <template #main_info>
        <assignRate
          title="CPU分配"
          :total="info?.totalCpuCores || 0"
          :chartsData="[
            { value: '系统预留', label: assignInfo?.preCpu || 0 },
            { value: '已使用', label: assignInfo?.usedCpu || 0 },
            { value: '剩余', label: assignInfo?.restCpu || 0 },
          ]"
        />
        <assignRate
          title="内存分配"
          :total="assignInfo?.totalMemory || 0"
          :chartsData="[
            { value: '系统预留', label: assignInfo?.preMem || 0 },
            { value: '已使用', label: assignInfo?.usedMem || 0 },
            { value: '剩余', label: assignInfo?.restMem || 0 },
          ]"
        />
        <assignRate
          title="存储"
          :total="info?.totalDisk || 0"
          :chartsData="[
            { value: '系统预留', label: info?.usedDisk || 0 },
            { value: '已使用', label: info?.usedDisk || 0 },
            { value: '剩余', label: info?.totalDisk - info?.usedDisk || 0 },
          ]"
        />
      </template>
    </BorderBox> -->
    <BorderBox title="主机组" :styleText="{ padding: 0 }">
      <template #main_info><vmGroup height="100%" /></template>
    </BorderBox>
  </div>
  <div class="overview_index flex_between_aligncenter" v-if="menu === 'host'">
    <startupDuration title="操作系统" :info="info" />
    <usedRate title="CPU" />
    <usedRate title="内存" />
    <vm :info="info" />
    <assignRate
      title="CPU分配"
      :total="info?.totalCpuCores || 0"
      :chartsData="[
        { value: '系统预留', label: assignInfo?.preCpu || 0 },
        { value: '已使用', label: assignInfo?.usedCpu || 0 },
        { value: '剩余', label: assignInfo?.restCpu || 0 },
      ]"
    />
    <assignRate
      title="内存分配"
      :total="assignInfo?.totalMemory || 0"
      :chartsData="[
        { value: '系统预留', label: assignInfo?.preMem || 0 },
        { value: '已使用', label: assignInfo?.usedMem || 0 },
        { value: '剩余', label: assignInfo?.restMem || 0 },
      ]"
    />
    <vulnerability title="漏洞统计" />
  </div>
  <tagModal ref="tagModalRef" @fetchData="fetchTagData" />
  <editModal ref="editModalRef" @fetchData="fetchDetailData" />
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getHostListDetail, getAssignInfo } from "@/api/hostMgmt";
import { updataTagList, getTagList } from "@/api/cluserMgmt";
import platform from "common/platformType.vue";
import vmGroup from "common/detailInfo/vmGroup/index.vue";
import TagStatus from "@/components/TagStatus/index.vue";
import { useRoute } from "vue-router";
import usedRate from "./usedRate.vue";
import vm from "./vm.vue";
import assignRate from "./assignRate.vue";
import vulnerability from "./vulnerability.vue";
import startupDuration from "./startupDuration.vue";
import editModal from "../../../cluster/components/editModal.vue";
import tagModal from "../../../cluster/components/tagModal.vue";

const route = useRoute();
const { id } = route.params;
const { menu } = route.query;
const info = ref(null);
const assignInfo = ref(null);
const tagInfo = ref(null);
// 处理方法
const handleProject = (list) => {
  if (list && list?.length === 0) return;
  const arr = list?.map((item) => item.cfname);
  return arr?.join(", ");
};
// 获取列表
const fetchDetailData = async () => {
  try {
    const { data } = await getHostListDetail(id, menu);
    info.value = data;
  } catch (err) {
    console.log(err);
  }
};
// 获取分配资源信息
const fetchAssignData = async () => {
  try {
    const { data } = await getAssignInfo(id, menu);
    assignInfo.value = data;
  } catch (err) {
    console.log(err);
  }
};
// 获取集群信息
const fetchTagData = async () => {
  try {
    const { data } = await getTagList(id);
    const result = {};
    data?.forEach((item) => {
      result[item.dictType] = item.dictValue;
    });
    tagInfo.value = result || {};
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {
  fetchDetailData();
  fetchAssignData();
  if (menu === "cluster") {
    fetchTagData();
  }
});
</script>

<style lang="scss" scoped>
.overview_index {
  flex-wrap: wrap;
  width: 100%;
  padding: 0 16px;
}
</style>
